<template>
  <hr>
  <h1>x:{{ x }}</h1>
  <h1>y:{{ x.y }}</h1>
  <h1>state:{{ state }}</h1>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}K</h1>
  <button @click="person.name+='~'">修改姓名</button>
 <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1 ++">修改薪资</button> 
  <button @click="state ++">修改薪资</button> 
  <button @click="x.y ++">修改y</button> 
  <button @click="x={f:60}">替换x</button> 




</template>
<script setup lang="ts">
// 总结：
// shallowReactive 只有第一层是响应式的
  //  shallowRef 只能处理基本数据类型的响应式，无法处理对象的响应式
  // 场景：
  // 对象结构，变化的只有最外层属性变化 ====> shallowReactive
  // 对象结构：后续不会修改对象的属性，而是生成新的对象来替换   =====> shallowRef
import {reactive,toRef ,toRefs,shallowReactive,shallowRef,ref} from 'vue';
 let person=shallowReactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
 const state=shallowRef(0)
 const x=shallowRef({y:0})
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
